import React, { Component } from 'react'
import { Card, Button, Form, Input, Select, message } from 'antd'
import { to } from 'await-to-js'
import './webSocketAdd.less'
import { reqWebSocketListOne, reqWebSocketUpdate, reqWebSocketAdd } from '../../../../api'
import cryptoRandomString from 'crypto-random-string'
import md5 from 'js-md5'

const { Option } = Select;
class WebSocketAdd extends Component {

    state = {
        siteName: '',
        url: '',
        secret: md5((cryptoRandomString({length: 16}) + new Date().getTime())),
        status: 1,
        _id: '0'
    }

    async componentDidMount() {
        let _id = this.props.match.params._id
        if (_id !== '0') {
            let [err, res] = await to(reqWebSocketListOne(_id))
            if (err) return console.log(err)
            if (res.code !== 0) return message.error(res.msg)
            const { siteName, url, secret, status } = res.body
            this.setState({ siteName, url, secret, status, _id })
        }
    }
    handleSubmit = e => {
        e.preventDefault()
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let postData = JSON.parse(JSON.stringify(values))
                // let err, res
                if (this.state._id !== '0') {
                    postData._id = this.state._id
                    reqWebSocketUpdate(postData).then(res => {
                        if (res.code !== 0) return message.error(res.msg)
                        message.success(res.msg)
                        setTimeout(() => {
                            this.props.history.go(-1)
                        }, 2000)
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    reqWebSocketAdd(postData).then(res => {
                        if (res.code !== 0) return message.error(res.msg)
                        message.success(res.msg)
                        setTimeout(() => {
                            this.props.history.go(-1)
                        }, 2000)
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }
        })
    }

    goBack = () => {
        this.props.history.go(-1)
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { siteName, url, secret, status, _id } = this.state
        return (
            <Card title={ _id === '0' ? '添加socket站点' : '编辑socket站点'} className="webSocketadd">
                <Form onSubmit={this.handleSubmit} labelCol={{ span: 2 }} wrapperCol={{ span: 20 }}>
                    <Form.Item label="站点名称" >
                        {getFieldDecorator('siteName', {
                            rules: [{ required: true }],
                            initialValue: siteName,
                        })(
                            <Input
                                placeholder="请输入站点名称"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label="密钥" >
                        {getFieldDecorator('secret', {
                            rules: [{ required: true } ],
                            initialValue: secret,
                        })(
                            <Input
                                placeholder="请输入密钥"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label="url" >
                        {getFieldDecorator('url', {
                            rules: [],
                            initialValue: url,
                        })(
                            <Input
                                placeholder="请输入url"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item label="监控" wrapperCol={{ span: 4 }}>
                        {getFieldDecorator('status', {
                            rules: [],
                            initialValue: status
                        })(
                            <Select
                                placeholder="请选择是否开启http监控"
                            >
                                <Option value={1}>开启</Option>
                                <Option value={2}>关闭</Option>
                            </Select>,
                        )}
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 2}}>
                        <Button type="primary" htmlType="submit" className="form-button">
                            提交
                        </Button>
                        <Button onClick={this.goBack} className="form-button-back">
                            返回
                        </Button>
                    </Form.Item>
                </Form>

            </Card>
        )
    }
}

const WrappedWebSocketAdd = Form.create()(WebSocketAdd)
export default WrappedWebSocketAdd
